import { getGeoData, getProvinceData, getProvinceList } from '@/utils/geoData'
import * as echarts from 'echarts'

export default {
  name: 'Map',
  data() {
    return {
      geoData: null,
      provinceList: [],
      chart: null
    }
  },
  mounted() {
    console.log('Map.vue mounted')
    this.initMap()
  },
  created() {
    console.log('开始加载地理数据...')
    this.geoData = getGeoData()
    this.provinceList = getProvinceList()
    console.log('地理数据加载完成：', {
      geoDataFeatures: this.geoData?.features?.length,
      provinceList: this.provinceList?.length
    })
  },
  methods: {
    initMap() {
      console.log('开始初始化地图...')
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.mapContainer)
      }

      const option = {
        backgroundColor: '#04143c',
        geo: {
          map: 'china',
          roam: true,
          label: {
            show: true,
            color: '#fff',
            fontSize: 12
          },
          itemStyle: {
            areaColor: '#0c1c4c',
            borderColor: '#1a92ff',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10
          },
          emphasis: {
            itemStyle: {
              areaColor: '#0c3b8d'
            },
            label: {
              color: '#fff'
            }
          }
        },
        series: []
      }

      console.log('注册地图数据...')
      echarts.registerMap('china', this.geoData)
      
      console.log('设置地图配置...')
      this.chart.setOption(option)
      
      console.log('地图初始化完成')

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        this.chart?.resize()
      })
    },
    loadProvinceData(adcode) {
      console.log('加载省份数据:', adcode)
      const provinceData = getProvinceData(adcode)
      if (provinceData) {
        console.log('获取到省份数据:', provinceData.properties.name)
        this.currentProvince = provinceData
      } else {
        console.warn('未找到省份数据:', adcode)
      }
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
    window.removeEventListener('resize', this.chart?.resize)
  }
}

<template>
  <div class="map-container">
    <div style="color: #fff;">地图调试：如果你看到这行字，说明组件已渲染</div>
    <div ref="mapContainer" class="map"></div>
  </div>
</template>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: #04143c;
}
</style> 